
<template>
  <n-tabs
    class="card-tabs"
    default-value="signin"
    size="large"
    animated
    pane-wrapper-style="margin: 0 -4px"
    pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
  >
    <n-tab-pane name="signin" tab="登录">
      <n-form 
      ref="formLoginRef"
      :model="loginModel"
      :rules="loginRules"
      >
        <n-form-item-row label="用户名" path="userName">
          <n-input placeholder="请输入用户名" v-model:value="loginModel.userName" />
        </n-form-item-row>
        <n-form-item-row label="密码" path="passWord">
          <n-input placeholder="请输入密码" v-model:value="loginModel.passWord"/>
        </n-form-item-row>
      </n-form>
      <n-button type="primary" block secondary strong @click="userLogin">
        登录
      </n-button>
      <div class="otherlogin">
        <p>其他方式登录：</p>
        <div>
          <svg class="icon otherlogin-icon" aria-hidden="true">
            <use xlink:href="#icon-weixin"></use>
          </svg>
          <svg class="icon otherlogin-icon" aria-hidden="true">
            <use xlink:href="#icon-QQ"></use>
          </svg>
          <svg class="icon otherlogin-icon" aria-hidden="true">
            <use xlink:href="#icon-weibo"></use>
          </svg>
        </div>
      </div>
    </n-tab-pane>
    <n-tab-pane name="signup" tab="注册">
      <n-form
        ref="formRegRef"
        :model="regModel"
        :rules="regRules"
      >
        <n-form-item-row label="用户名" path="userName">
          <n-input placeholder="请输入用户名" v-model:value="regModel.userName"/>
        </n-form-item-row>
        <n-form-item-row label="密码" path="passWord">
          <n-input placeholder="请输入密码" v-model:value="regModel.passWord"/>
        </n-form-item-row>
        <n-form-item-row label="确认密码" path="repassWord">
          <n-input placeholder="请再次输入密码" v-model:value="regModel.repassWord"/>
        </n-form-item-row>
      </n-form>
      <n-button type="primary" block secondary strong @click="userRegister">
        注册
      </n-button>
    </n-tab-pane>
  </n-tabs>
</template>
<script setup lang="ts">
import { FormInst, FormItemRule, useMessage } from 'naive-ui'
const message = useMessage()
const formLoginRef = ref<FormInst | null>(null)
const formRegRef = ref<FormInst | null>(null)
let loginModel = reactive({
  userName:'',
  passWord:''
})
let regModel = reactive({
  userName:'',
  passWord:'',
  repassWord:''
})
const loginRules = reactive({
  userName: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
  ],
  passWord: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
  ]
})
const regRules = reactive({
  userName: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
  ],
  passWord: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
  ],
  repassWord: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
  ]
})
const userLogin = (e: MouseEvent) => {
  e.preventDefault()
  formLoginRef.value?.validate(error => {
    if (!error) {
      message.success('验证成功')
    } else {
      message.error(JSON.stringify(error))
    }
  })
}
const userRegister = (e: MouseEvent) => {
  e.preventDefault()
  formRegRef.value?.validate(error => {
    if (!error) {
      message.success('验证成功')
    } else {
      message.error(JSON.stringify(error))
    }
  })
}
</script>

<style lang="scss" scoped>
.otherlogin{
  margin-top: 30px;
  display: flex;
  align-items: center;
  &-icon{
    font-size:30px;
    margin-left: 20px;
    cursor: pointer;
  }
}
</style>

